<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500 - 服务器错误</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .countdown {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container text-center">
        <h1 class="display-4">500</h1>
        <p class="lead">抱歉，服务器发生错误</p>
        <p>我们正在努力修复问题，请稍后再试</p>
        <div class="countdown" id="countdown">5</div>
    </div>

    <script>
        // Countdown function to redirect after 5 seconds
        function countdownRedirect() {
            let count = 5;
            const countdownElem = document.getElementById("countdown");

            const countdownInterval = setInterval(() => {
                count--;
                countdownElem.textContent = count;

                if (count <= 0) {
                    clearInterval(countdownInterval);

                    // Check if there is a previous page in the history
                    if (document.referrer) {
                        window.history.back(); // Go back to the previous page
                    } else {
                        window.location.href = "/"; // Redirect to the homepage
                    }
                }
            }, 1000);
        }

        // Start the countdown when the page is loaded
        document.addEventListener("DOMContentLoaded", () => {
            countdownRedirect();
        });
    </script>
</body>

</html>
